<template>
    <div class="app-container">
        <div class="filter-container">
            <el-input
                v-model="account"
                placeholder="请输入卡号查询"
                style="width: 200px;margin-right: 20px"
                class="filter-item"
            />
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="account && getList()">
                {{ $t('table.search') }}
            </el-button>
            <el-button
                class="filter-item"
                style="margin-left: 10px;"
                type="primary"
                icon="el-icon-refresh"
                @click="reset"
            >
                重置
            </el-button>
        </div>
        <el-table
            :key="0"
            v-loading="listLoading"
            :data="list"
            border
            fit
            highlight-current-row
            style="width: 100%;"
        >
            <el-table-column label="卡号" prop="gasAccount"></el-table-column>
            <el-table-column label="表号" prop="meterNo"></el-table-column>
            <el-table-column label="微信昵称" prop="nickName"></el-table-column>
            <el-table-column label="金额">
                <template slot-scope="scope">
                    <span>{{ `￥${(scope.row.amount / 100).toFixed(2)}` }}</span>
                </template>
            </el-table-column>
            <el-table-column label="支付状态">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.status === 0 ? 'danger' : scope.row.status === 1 ? 'warning' : scope.row.status === 2 ? 'success' : ''">
                        {{ scope.row.status === 0 ? '未支付' : scope.row.status === 1 ? '已付款' : scope.row.status === 2 ? '充值成功' : '' }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="时间">
                <template slot-scope="scope">
                    <span>{{ `${formatTime(scope.row.createTime)}` }}</span>
                </template>
            </el-table-column>
        </el-table>
        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="page"
            :limit.sync="limit"
            @pagination="getList"
        />
    </div>
</template>

<script>
    import { paymentList } from '@/api/wx-front'
    import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

    export default {
        components: {
            Pagination
        },

        data() {
            return {
                listLoading: true,
                list: [],
                account: '',
                page: 1,
                limit: 20,
                total: 0
            }
        },

        methods: {
            formatTime(num) {
                const time = new Date(num)
                const year = time.getFullYear()
                const month = time.getMonth() + 1
                const date = time.getDate()
                const hour = time.getHours()
                const minute = time.getMinutes()

                return `${year}-${month <= 9 ? '0' : ''}${month}-${date <= 9 ? '0' : ''}${date} ${hour <= 9 ? '0' : ''}${hour}:${minute <= 9 ? '0' : ''}${minute}`
            },

            async getList() {
                const { data: { total, list } } = await paymentList({
                    page: this.page,
                    limit: this.limit,
                    account: this.account
                })

                this.list = list
                this.total = total
                this.listLoading = false
            },

            reset() {
                this.page = 1
                this.account = ''
                this.getList()
            }
        },

        mounted() {
            this.getList()
        }
    }
</script>
